<template>

  <div class="container">
    <span class="text">英雄联盟</span>
    <!-- </br> -->
    <!-- <img src="@/assets/3.png" alt=""> -->
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
/* #welcome {
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    亮度
    filter: brightness(100%);
    透明度
    filter: opacity(85%);
  }
} */
.container {

  width: 100%;
  height: 730px;
  /* padding-top: 300px; */
  /* margin-top: 50px; */
 
  text-align: center;
  line-height: 700px;
  background-color:antiquewhite;
  filter: contrast(30);

}

.text {
  font-size: 100px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  letter-spacing: -40px;
  color: #000;
  /* forwards当动画完成后，保持最后一帧的状态 */
  animation: move-letter 4s linear forwards;
}

@keyframes move-letter {
  0% {
    opacity: 0;
    letter-spacing: -40px;
    filter: blur(10px);
  }

  25% {
    opacity: 1;
  }

  50% {
    filter: blur(5px);
  }

  100% {
    letter-spacing: 20px;
    filter: blur(2px);
  }
}
</style>